搭建 MOCK 服务

搭建 MOCK 服务

安装 mock.js

1
2
npm run mockjs
npm install supervisor -g

supervisor是一个用来运行node程序监控程序。(类似于 pm2)它是Nodejs的一个很小的监控脚本。它运行在你的程序中，并且监控你的代码变化，所以你可以进行代码热更新，而不用担心内存泄漏和确保你清理所有模块间的引用。

1
2
3
"scripts":{
	"mock": "supervisor -w mock ./xxx/http.js",
}

文档

Mock.mock(rurl,rtype,data)

  • rurl: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list.json/、’/domian/list.json’
  • rtype: 可选.表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  • data: 对象,字符串, 函数.

Mock.setup( settings )
配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。Mock.setup({
timeout: ‘200-600’
})

Mock.valid(template, data)校验真实数据 data 是否与数据模板 template 匹配。

Mock.toJSONSchema(template)把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

Mock.Random是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

1
2
3
4
5
6
7
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

提供的占位符有以下类型:
|type|method|
|Basic|boolean,interger,float,string,date,time,now…|
|Image|image,dataImage|
|Color|color|
|Text|parafraph,sentence,word,title,cparafraph…|
|Color|color|
|Name|first,last,name,cfirst,clast,cname|
|Web|url,email,ip,tld,domain|
|Address|area,region|
|Other|id,picl…|

使用 node 的http模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const http = require('http')
const Mock = require('mockjs')

http
  .createServer((req, res) => {
    res.writeHead(200, {
      'Content-Type': 'application/json;charset=utf-8',
      'Access-Control-Allow-Origin': req.headers.origin || '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': '*',
      'Access-Control-Allow-Credentials': true,
      'Cache-Control': 'no-cache,no-store', // clear cache
    })
    if (req.method === 'OPTIONS') {
      res.end(null)
    }
    if (req.method === 'POST') {
      let postData = ''
      req.addListener('data', (dataBuffer) => (postData += dataBuffer))
      req.addListener('end', () => {
        postData = JSON.parse(postData)
        const data = []
        setTimeout(() => {
          res.end(JSON.stringify(data))
        }, parseInt((Math.random() - 0.5 + 1) * 500, 10)) // 随机数
      })
    }
    if (req.method === 'GET') {
      setTimeout(() => {
        res.end(Mock.mock('@cname'))
      }, parseInt((Math.random() - 0.5 + 1) * 500, 10)) // 随机数
    }
  })
  .listen(1111)
console.log('listening port 1111')

使用concurrently同时开启前端服务和后端服务

  • 安装npm install concurrently --save-dev
  • 更改 package.json 的 script `”xx”: “concurrently \”npm run xxx\” \”npm run xxx2\””